import type { StoreInfo } from "@/Interface/StoreInfoInterface";
import style from "./style.module.scss";
import { useBasicDataStore } from "@/stores/basicDataStore";
import { useCmpDataStore } from "@/stores/cmpDataStore";
import { useMonthStore } from "@/stores/monthStore";


const CompareList: React.FC = () => {
  const basicData = useBasicDataStore(state => state.basicData) as StoreInfo;
  const cmpData = useCmpDataStore(state => state.cmpData) as StoreInfo;
  const curMonth = useMonthStore(state => state.month);


  // 指标配置
  const metricsConfig = [
    {
      label: "总成本（元）",
      getValue: (data: StoreInfo) =>
        data.monthlyData[curMonth - 1].costs.total,
      diff: (a: number, b: number) => a - b
    },
    {
      label: "新增会员数",
      getValue: (data: StoreInfo) =>
        data.monthlyData[curMonth - 1].membership.newMembers,
      diff: (a: number, b: number) => a - b
    },
    {
      label: "会员消费占比",
      getValue: (data: StoreInfo) =>
        data.monthlyData[curMonth - 1].membership.consumptionRatio,
      diff: (a: number, b: number) => a - b
    },
    {
      label: "复购率",
      getValue: (data: StoreInfo) =>
        data.monthlyData[curMonth - 1].membership.repurchaseRate,
      diff: (a: number, b: number) => a - b
    },
    {
      label: "人效（元/人）",
      getValue: (data: StoreInfo) =>
        data.monthlyData[curMonth - 1].staffEfficiency,
      diff: (a: number, b: number) => a - b
    },
    {
      label: "坪效（元/㎡）",
      getValue: (data: StoreInfo) =>
        data.monthlyData[curMonth - 1].areaEfficiency,
      diff: (a: number, b: number) => a - b
    },
    {
      label: "翻台率",
      getValue: (data: StoreInfo) =>
        data.monthlyData[curMonth - 1].tableTurnover,
      diff: (a: number, b: number) => a - b
    },
    {
      label: "员工数量",
      getValue: (data: StoreInfo) =>
        data.monthlyData[curMonth - 1].staffCount,
      diff: (a: number, b: number) => a - b
    },
    {
      label: "外卖占比",
      getValue: (data: StoreInfo) =>
        data.monthlyData[curMonth - 1].deliveryRatio,
      diff: (a: number, b: number) => a - b
    }
  ];

  // 生成表格行
  const renderRows = () => {
    return metricsConfig.map((metric, index) => {
      const basicValue = metric.getValue(basicData);
      const cmpValue = metric.getValue(cmpData);

      // 转换为数值
      const numBasic = typeof basicValue === "string"
        ? parseFloat(basicValue.replace('%', ''))
        : basicValue;
      const numCmp = typeof cmpValue === "string"
        ? parseFloat(cmpValue.replace('%', ''))
        : cmpValue;

      // 计算差异
      const difference = metric.diff(numBasic, numCmp);
      const isEqual = Math.abs(difference) < 0.001;
      const isPositive = difference > 0;
      const diffSymbol = difference > 0 ? "+" : (difference < 0 ? "-" : '');

      // 格式化显示
      let displayBasic = basicValue;
      let displayCmp = cmpValue;
      let diffDisplay = isEqual
        ? "-"  // 相等时显示横线
        : metric.label.includes("占比") || metric.label.includes("率")
          ? `${diffSymbol}${Math.abs(difference).toFixed(1)}pp`
          : `${diffSymbol}${Math.abs(difference).toLocaleString()}`;


      if (metric.label.includes("效") || metric.label === "翻台率") {
        displayBasic = typeof basicValue === "string"
          ? parseFloat(basicValue).toFixed(1)
          : basicValue.toFixed(1);
        displayCmp = typeof cmpValue === "string"
          ? parseFloat(cmpValue).toFixed(1)
          : cmpValue.toFixed(1);
      }

      if (metric.label.includes("占比") || metric.label.includes("率")) {
        diffDisplay = `${diffSymbol}${Math.abs(difference).toFixed(1)}pp`;
      } else {
        diffDisplay = `${diffSymbol}${Math.abs(difference).toLocaleString()}`;
      }

      return (
        <tr key={index}>
          <td>{metric.label}</td>
          <td className={isPositive ? style.positive : ""}>
            {metric.label.includes("效") ? displayBasic : basicValue}
          </td>
          <td className={!isPositive && !isEqual ? style.negative : ""}>
            {metric.label.includes("效") ? displayCmp : cmpValue}
          </td>
          <td>
            <span className={isEqual ? "" : (isPositive ? style.positive : style.negative)}>
              {diffDisplay}
              {isEqual ? "" : (isPositive ? " ↑" : " ↓")}
            </span>
          </td>
        </tr>
      );
    });
  };

  return (
    <div className={style.promotionList}>
      <h4>{curMonth}月核心指标对比</h4>
      <table className={style.content}>
        <thead>
          <tr>
            <th>指标项</th>
            <th>当前门店</th>
            <th>对比门店</th>
            <th>差异值</th>
          </tr>
        </thead>
        <tbody>
          {renderRows()}
        </tbody>
      </table>
    </div>
  );
};

export default CompareList;